<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>新增商品</title>
    <jsp:include page="common/common_css.jsp"/>
    <style>
        .column img{
            max-width: 29em;
        }
    </style>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <jsp:include page="common/message.jsp"/>
            <form class="ui large form">
                <div class="ui stacked segment">
                    <input name="categoryId" type="hidden">
                    <div class="field">
                        <div class="ui simple dropdown large label">
                            分类：
                            <div class="text">请选择</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <c:forEach items="${categoryList}" var="category">
                                    <div class="item JS-category-item" data-value="${category.id}">
                                        <label>${category.name}</label>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui labeled input">
                            <div class="ui label">
                                商品名称：
                            </div>
                            <input name="name" type="text" placeholder="" maxlength="50">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui labeled input">
                            <div class="ui label">
                                商品介绍：
                            </div>
                            <input name="introduce" type="text" placeholder="" maxlength="200">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui labeled input">
                            <div class="ui label">
                                商品数量：
                            </div>
                            <input name="number" type="number" placeholder="" min="0">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui right labeled input">
                            <div class="ui label">
                                商品单价：
                            </div>
                            <input name="price" type="number" placeholder="" min="0">
                            <div class="ui basic label">元</div>
                        </div>
                    </div>
                    <div class="field">
                        <button id="JS-image" class="ui button"><i class="add circle icon"></i>封面图片</button>
                        <div id="preview" style="margin-top: 0.5em"></div>
                        <label id="JS-progress"></label>
                        <input name="image" type="hidden">
                    </div>
                    <div class="ui error message"></div>
                    <button class="ui fluid large teal submit button">发布商品</button>
                </div>
            </form>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        var CJ = {
            data: {},
            event: {
                registerGlobal: function () {
                    $('.JS-category-item').click(function () {
                        var value = $(this).data('value');
                        $('input[name=categoryId]').val(value);
                    });
                    $('.JS-status').click(function () {
                        var value = $(this).data('value');
                        var text = $(this).text();
                        var doDom = $(this).parent().prev().prev();
                        doDom.text(text);
                        doDom.parent().prev().data('value', value);
                    });
                }
            },
            request: {},
            ui: {},
            init: function () {
                $('.ui.form')
                    .form({
                        fields: {
                            categoryId: {
                                identifier: 'categoryId',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '请选择分类。'
                                    }
                                ]
                            },
                            name: {
                                identifier: 'name',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '请输入名称。'
                                    }
                                ]
                            },
                            number: {
                                identifier: 'number',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '请输入商品数量。'
                                    }
                                ]
                            },
                            price: {
                                identifier: 'price',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '请输入商品单价。'
                                    }
                                ]
                            },
                            image: {
                                identifier: 'image',
                                rules: [
                                    {
                                        type: 'empty',
                                        prompt: '请选择商品封面图。'
                                    }
                                ]
                            }
                        },
                        onSuccess:function () {
                            if ($('form .submit.button').hasClass('loading')) {
                                return false;
                            }
                            CJ.data.uploader.start();
                            return false;
                        }
                    })
                ;
                $(".ui.dropdown").dropdown();
                CJ.event.registerGlobal();
                CJ.data.uploader = new QiniuJsSDK().uploader({
                    runtimes: 'html5,flash,html4',      // 上传模式，依次退化
                    browse_button: 'JS-image',         // 上传选择的点选按钮，必需
                    uptoken_url: ROOT + '/sale/goods/uploadToken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
                    get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken
                    domain: config.download,     // bucket域名，下载资源时用到，必需
                    max_file_size: '100mb',             // 最大文件体积限制
//                    multi_selection: false,// 设置一次只能选择一个文件
                    flash_swf_url: 'https://cdn.staticfile.org/plupload/2.1.9/Moxie.swf',  //引入flash，相对路径
                    max_retries: 3,                     // 上传失败最大重试次数
                    dragdrop: false,                     // 开启可拖曳上传
                    chunk_size: '4mb',                  // 分块上传时，每块的体积
                    auto_start: false,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                    x_vars: {
                        'categoryId': function (up, file) {
                            return $('input[name=categoryId]').val();
                        },
                        'name': function (up, file) {
                            return $('input[name=name]').val();
                        },
                        'introduce': function (up, file) {
                            return $('input[name=introduce]').val();
                        },
                        'number': function (up, file) {
                            return $('input[name=number]').val();
                        },
                        'price': function (up, file) {
                            return common.yuan2fen($('input[name=price]').val());
                        },
                    },
                    init: {
                        'FilesAdded': function (up, files) {
                            if (up.files.length > 1) { // 最多上传1张图
                                up.splice(0, up.files.length - 1);
                            }
                            window.common.previewImage(up.files[0], function (imgsrc) {
                                $('#preview').html('<img src="' + imgsrc + '" name="' + up.files[0].name + '"/>');
                                $('input[name=image]').val(imgsrc);
                            });
                        },
                        'BeforeUpload': function (up, file) {
                            // 每个文件上传前，处理相关的事情
                            $('form .submit.button').addClass('loading');
                        },
                        'UploadProgress': function (up, file) {
                            // 每个文件上传时，处理相关的事情
                            $('#JS-progress').text('上传进度：' + file.percent + '%');
                        },
                        'FileUploaded': function (up, file, info) {
                            var json = window.JSON.parse(info);
                            if (json.code == 1) {
                                window.location.replace(ROOT + "/sale/goods");
                            } else {
                                alert(json.errorMsg);
                                $('#preview').html('');
                                $('input[name=image]').val('');
                            }
                        },
                        'Error': function (up, err, errTip) {
                            //上传出错时，处理相关的事情
                            alert('上传失败');
                            $('#preview').html('');
                        },
                        'UploadComplete': function () {
                            //队列文件处理完毕后，处理相关的事情
                            $('form .submit.button').removeClass('loading');
                            $('#JS-progress').text('');
                        },
                    }
                });
            }
        };
        CJ.init();
    });
</script>
</body>
</html>
